{% extends "website/staff/staff_base.html" %}
{% load static %}
{% block content %}
<h1 style="margin:0;">My Inbox</h1>
<div style="opacity:.75;margin-top:4px;">Assigned to you • SLA countdown timers included</div>

<div class="olutech-card" style="margin-top:14px;">
  <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;">
    <div style="font-weight:800;">Support tickets</div>
    <div style="opacity:.7;">{{ support_rows|length }} items</div>
  </div>
  <div class="table-sticky" style="margin-top:10px;">
    <table class="table">
      <thead>
        <tr>
          <th>Ticket</th>
          <th>Status</th>
          <th>Created</th>
          <th>Due</th>
          <th>SLA</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for row in support_rows %}
          <tr>
            <td>#{{ row.obj.public_id }} — {{ row.obj.subject }}</td>
            <td>{{ row.obj.status }}</td>
            <td>{{ row.obj.created_at }}</td>
            <td>{{ row.due_at }}</td>
            <td><span data-sla data-due="{{ row.due_at|date:'c' }}"></span></td>
            <td><a class="btn btn-light" href="/staff/support/">Open</a></td>
          </tr>
        {% empty %}
          <tr><td colspan="6" style="opacity:.7;">No assigned support tickets.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="olutech-card" style="margin-top:14px;">
  <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;">
    <div style="font-weight:800;">Care requests</div>
    <div style="opacity:.7;">{{ care_rows|length }} items</div>
  </div>
  <div class="table-sticky" style="margin-top:10px;">
    <table class="table">
      <thead>
        <tr>
          <th>Request</th>
          <th>Status</th>
          <th>Created</th>
          <th>Due</th>
          <th>SLA</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for row in care_rows %}
          <tr>
            <td>#{{ row.obj.id }} — {{ row.obj.full_name }} ({{ row.obj.request_type }})</td>
            <td>{{ row.obj.status }}</td>
            <td>{{ row.obj.created_at }}</td>
            <td>{{ row.due_at }}</td>
            <td><span data-sla data-due="{{ row.due_at|date:'c' }}"></span></td>
            <td><a class="btn btn-light" href="/staff/care/requests/">Open</a></td>
          </tr>
        {% empty %}
          <tr><td colspan="6" style="opacity:.7;">No assigned care requests.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<script>
(function(){
  function fmt(ms){
    const s = Math.floor(ms/1000);
    const sign = s<0 ? "-" : "";
    const a = Math.abs(s);
    const h = Math.floor(a/3600);
    const m = Math.floor((a%3600)/60);
    const ss = a%60;
    return `${sign}${h}h ${m}m ${ss}s`;
  }
  function tick(){
    document.querySelectorAll('[data-sla]').forEach(el=>{
      const due = el.getAttribute('data-due');
      if(!due){ el.textContent="—"; return; }
      const dueDt = new Date(due);
      const diff = dueDt.getTime() - Date.now();
      el.textContent = diff>=0 ? "⏳ " + fmt(diff) : "⚠️ Overdue " + fmt(diff);
    });
    setTimeout(tick, 1000);
  }
  document.addEventListener('DOMContentLoaded', tick);
})();
</script>
{% endblock %}